<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>图片</title>
    <link rel="stylesheet" href="../../vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../../vendors/base/vendor.bundle.base.css">
    <link rel="stylesheet" href="../../vendors/datatables.net-bs4/dataTables.bootstrap4.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="shortcut icon" href="../../images/favicon.png" />
</head>
<style>
    .table td img {
        width: 150px;
        height: 150px;
        border-radius:0;
    }
</style>
<body>
<div class="container-scroller">
    <!-- 头部内容 -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" href="../../home.html"><img src="../../images/logo.svg" alt="logo" /></a>
                <a class="navbar-brand brand-logo-mini" href="../../home.html"><img src="../../images/logo-mini.svg" alt="logo" /></a>
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
            <ul class="navbar-nav mr-lg-4 w-100">
                <li class="nav-item nav-search d-none d-lg-block w-100">
                    <div class="input-group">
                        <div class="input-group-prepend">
                <span class="input-group-text" id="search">
                  <i class="mdi mdi-magnify"></i>
                </span>
                        </div>
                        <input type="text" class="form-control" placeholder="Search now" aria-label="search"
                               aria-describedby="search">
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav navbar-nav-right">
                <!-- 消息图标 -->
                <li class="nav-item dropdown me-1">
                    <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                       id="messageDropdown" href="#" data-bs-toggle="dropdown">
                        <i class="mdi mdi-message-text mx-0"></i>
                        <span class="count"></span>
                    </a>
                </li>
                <!-- 提醒图标 -->
                <li class="nav-item dropdown me-4">
                    <a class="nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center notification-dropdown"
                       id="notificationDropdown" href="#" data-bs-toggle="dropdown">
                        <i class="mdi mdi-bell mx-0"></i>
                        <span class="count"></span>
                    </a>
                </li>
                <!-- 用户头像 -->
                <li class="nav-item nav-profile dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" id="profileDropdown">
                        <img src="../../images/faces/face5.jpg" alt="profile" />
                        <span class="nav-profile-name">草莓熊</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                        <a class="dropdown-item">
                            <i class="mdi mdi-settings text-primary"></i>
                            设置
                        </a>
                        <a class="dropdown-item" href="../../login.html">
                            <i class="mdi mdi-logout text-primary"></i>
                            退出
                        </a>
                    </div>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                    data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <!-- 导航栏+内容部分 -->
    <div class="container-fluid page-body-wrapper">
        <!--导航栏-->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="../../home.html">
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">主页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../article/article.html">
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">文章管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="picture.html">
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">图片管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">视频管理</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../user/user.html">
                        <i class="mdi mdi-chart-pie menu-icon"></i>
                        <span class="menu-title">用户管理</span>
                    </a>
                </li>
            </ul>
        </nav>
        <!--内容主题部分-->
        <div class="main-panel">
            <div class="container-fluid">
                <div style="display: inline-block; margin-top:30px;">
                    <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">上传照片</button>
                    <!--搜索框-->
                    <input type="text" id="ret" placeholder="根据简介搜索" style="height: 40px; margin-left: 100px">
                    <!--搜索按钮-->
                    <button type="button" class="btn btn-success set_btn">搜索</button>
                </div>
                <table class="table table-bordered table-striped table-hover bg-color" style="width: 100%; height: auto; margin-top: 30px;">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>图片</th>
                        <th>图片简介</th>
                        <th>上传时间</th>
                        <th style="width: 15%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
<!--                        <tr>-->
<!--                            <td>1</td>-->
<!--                            <td>-->
<!--                                <img class="img" src="../../img/669e8806-2b25-4e0d-8920-c2f28fc07361.jpg">-->
<!--                            </td>-->
<!--                            <td>简介</td>-->
<!--                            <td>2023.12.19</td>-->
<!--                            <td>-->
<!--                                <button type="button" class="btn btn-success">修改</button>-->
<!--                                <button type="button" class="btn btn-danger">删除</button>-->
<!--                            </td>-->
<!--                        </tr>-->
                    </tbody>
                </table>
                <!-- 添加模态框 -->
                <div class="modal fade" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title">上传图片</h4>
                            </div>
                            <!-- 模态框主体 -->
                            <div class="modal-body">
<!--                                <form action="http://localhost:8080/my_demo/addPicture" method="post" enctype="multipart/form-data">-->
                                <form>
                                    <!--用于判断是添加操作还是删除操作,把它隐藏起来  style="display: none;"-->
                                    <div class="form-group" style="display: none;">
                                        <label for="id">id:</label>
                                        <input type="text" name="id" class="form-control" id="id">
                                    </div>
                                    <div class="form-group">
                                        <label for="pic">图片简介:</label>
                                        <input type="text" name="pic" class="form-control" id="pic" placeholder="图片简介">
                                    </div>
                                    <div class="form-group">
                                        <label for="upload">选择图片</label>
                                        <input type="file" name="file" class="form-control" id="upload" accept=".jpg"><!--accept=".jpg"只允许上传jpg格式-->
                                    </div>
                                    <button type="button" class="btn btn-primary submit">提交</button>
                                    <button type="button" class="btn btn-secondary close" data-dismiss="modal" style="float: right">关闭</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 修改模态框 -->
                <div class="modal fade" id="myModal2">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title">修改简介</h4>
                            </div>
                            <!-- 模态框主体 -->
                            <div class="modal-body">
                                <div class="form-group" style="display: none;">
                                    <label for="id">id:</label>
                                    <input type="text" name="id" class="form-control" id="update-id">
                                </div>
                                <div style="text-align: center">
                                    <img id="img" src="http://localhost:8080//image/51026baa-950d-448a-81ec-030acaefdef9.jpg" style="width: 100px; height: 100px">
                                </div>
                                <form style="margin-top: 30px">
                                    <div class="form-group">
                                        <label for="pic2">图片简介:</label>
                                        <input type="text" name="pic2" class="form-control" id="pic2" placeholder="图片简介">
                                    </div>
                                </form>
                            </div>
                            <!-- 模态框底部 -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary update-submit">提交</button>
                                <button type="button" class="btn btn-secondary update-close" data-dismiss="modal" style="float: right">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../vendors/base/vendor.bundle.base.js"></script>
<script src="../../vendors/chart.js/Chart.min.js"></script>
<script src="../../vendors/datatables.net/jquery.dataTables.js"></script>
<script src="../../vendors/datatables.net-bs4/dataTables.bootstrap4.js"></script>
<script src="../../js/off-canvas.js"></script>
<script src="../../js/hoverable-collapse.js"></script>
<script src="../../js/dashboard.js"></script>
<script src="../../js/data-table.js"></script>
<script src="../../js/jquery.dataTables.js"></script>
<script src="../../js/dataTables.bootstrap4.js"></script>
<script src="../../js/jquery.cookie.js" type="text/javascript"></script>
<script src="../../js/axios.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    //页面加载完成后（不一定是刷新后）调用一个函数
    window.onload = function () {
        console.log('页面加载完成')
        //调用渲染页面函数
        getPictureList()
    };
    //使用axios发起请求获取数据函数,渲染页面函数
    function getPictureList() {
        //发起axios请求获取数据
        let url = 'http://localhost:8080/my_demo/picture'
        axios({
            method: "get",
            url: url,
        }).then(res => {
            if (res.status === 200){
                let data = res.data
                //调用render页面渲染函数,传入前端返回的数据
                render(data)
            }
        })
    }
    //使用axios发起post请求,传回上传的图片.jpg文件和图片简介(注意带有文件类型的数据,需要利用FormData数据传给后端)
    function addPicture(formData) {
        //请求接口
        let url = 'http://localhost:8080/my_demo/addPicture'
        //使用axios请求，get请求的参数放params:{id:1}和 拼接 ?id=${id}的方式一样,post请求发送的是方法体应使用data发送,例：data: data
        axios({
            method: "post",
            url: url,
            data: formData
        }).then(res => {
            if (res.data.code === 200){
                alert(res.data.msg)
                //调用getPictureList(),重新查询数据库数据,并渲染到页面
                getPictureList()
                //上传成功,关闭模态框
                let btn = document.querySelector('.close')
                btn.click()
            }else {
                alert(res.data.msg)
            }

        })
    }

    //使用axios发起请求传回需要删除图片的id
    function deletePicture(id) {
    let url = 'http://localhost:8080/my_demo/deletePicture'
    axios({
        method: "get",
        url: url,
        params:{
            id:id
        }
    }).then(res => {
        if (res.data.code === 200){
            alert(res.data.msg)
            //调用getPictureList()函数重新渲染页面
            getPictureList()
        } else if (res.data.code === 400){
            alert(res.data.msg)
        } else {
            alert(res.data.msg)
        }
    })
    }

    //使用axios发起请求传回id获取需要修改的图片信息,填入输入框
    function getPictureById(id) {
        //请求地址
        let url = 'http://localhost:8080/my_demo/doUpdatePicture'
        //发送axios请求
        axios({
            method: "get",
            url: url,
            params: {
                id:id
            }
        }).then(res => {
            //将后端响应的信息放入输入框
            document.querySelector("#update-id").value = res.data.data.pictureId
            document.querySelector("#pic2").value = res.data.data.pictureIofo
            document.querySelector("#img").src = 'http://localhost:8080//image/' + res.data.data.pictureUrl
        })
    }

    //使用axios发起请求传回需要修改的用户信息
    function updatePicture(data) {
        //请求地址
        let url = 'http://localhost:8080/my_demo/updatePicture'
        //发送axios请求
        axios({
            method: "post",
            url: url,
            params: data
        }).then(res => {
            //将后端响应的数据转换
            if (res.data.code===200){
                alert(res.data.msg)
                //调用getUserList(),重新查询数据库数据,并渲染到页面
                getPictureList()
                //添加成功,关闭模态框
                let btn = document.querySelector('.update-close')
                btn.click()
            }
        })
    }

    //渲染页面函数
    function render(data) {
        //1.首先定义一个空字符串，用于存储一会遍历的数据，再放会页面
        let str = ''
        //2.利用forEach方法遍历数组，把数据拼接成字符串
        data.forEach(function (item,index) {
            str += `
            <tr>
                <td>${index+1}</td>
                <td>
                    <img class="img" src="http://localhost:8080//image/${item.pictureUrl}">
                </td>
                <td>${item.pictureIofo}</td>
                <td>${item.uploaded}</td>
                <td>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal2" data-id=${item.pictureId}>修改简介</button>
                    <button type="button" class="btn btn-danger" data-id=${item.pictureId}>删除</button>
                </td>
            </tr>
            `
        })
        //3.获取页面上的<tbody>，把拼接好的字符串追加到里面
        document.querySelector('tbody').innerHTML = str
    }

    // //获得选择文件框dom对象
    // let upload = document.querySelector("#upload")
    // //监听用户选择文件操作
    // upload.addEventListener('change',function () {
    //     //获取用户选中的文件对象
    //     let file = upload.files[0]; //.name文件名  .size文件大小   .type文件类型
    //     //可做限制文件上传格式
    //     //可做限制文件上传大小
    // })

    //获取提交按钮
    let submit = document.querySelector(".submit")
    //点击提交,发送axios请求把图片文件传输给后端
    submit.addEventListener('click',function () {
        //获取到上传的文件
        let file = document.querySelector("#upload").files[0]
        //获取图片简介输入框内容
        let pic = document.querySelector("#pic").value
        // 获取到文件不能直接传给后端
        // 利用formData传给后端
        let formData = new FormData();
        // image要和后端接口需要的参数名一致
        formData.append('file',file);
        formData.append('pic',pic)
        //调用addPicture()函数，发送axios请求,传入formData参数
        addPicture(formData)
    })

    //删除和修改用户,使用事件冒泡,获取我点击了那个按钮
    let tbody = document.querySelector('tbody')
    tbody.addEventListener("click", function (e) {
        if(e.target.className === 'btn btn-danger'){
            //获取要删除用户的id,传回后端
            let id = e.target.dataset.id
            //调用删除用户函数
            deletePicture(id)
        } else {
            //获取要修改用户的id,传回后端
            let id = e.target.dataset.id
            //调用查询图片函数,传入想要修改数据的用户id
            getPictureById(id)
        }
    })
    //点击关闭按钮清空输入框,先获取关闭按钮
    let btn = document.querySelector('.close')
    //点击关闭按钮
    btn.addEventListener('click',function () {
        //调用清空输入框函数
        clearInput()
    })

    //清空输入框函数
    function clearInput () {
        document.querySelector("#id").value = ''
        document.querySelector("#pic").value = ''
        document.querySelector("#upload").value = ''
    }

    //获取修改图片信息的提交按钮   .update-submit
    let update_submit_btn = document.querySelector(".update-submit")
    //给提交按钮绑定点击事件
    update_submit_btn.addEventListener('click',function (){
        //获取输入框的的值
        let picture_id = document.querySelector("#update-id").value
        let picture_info = document.querySelector("#pic2").value
        console.log(picture_id)
        console.log(picture_info)
        //js的数据对象
        let data = {
            "picture_id": picture_id,
            "picture_info": picture_info,
        }
        //调用将获取到的修改数据
        updatePicture(data)
    })

    //点击搜索按钮,发起axios请求把搜索输入框的值传递给后端,再根据后端响应回来的数据重新渲染页面
    //1.先获取搜索按钮的dom对象
    let set_btn = document.querySelector(".set_btn")
    //2.给搜索按钮添加点击响应事件
    set_btn.addEventListener("click",function (){
        //3.获取搜索输入框的值
        let value = document.querySelector("#ret").value
        //4.调用搜索函数，传入value
        search(value)
    })

    //发起axios请求，用于搜索
    function search(value) {
        //请求地址
        let url = 'http://localhost:8080/my_demo/searchPicture'
        //发送axios请求
        axios({
            method: "get",
            url: url,
            params:{
                value:value
            }
        }).then(res => {
            console.log(res)
            if (res.status === 200){
                let data = res.data
                //调用render函数,传入前端返回的数据
                render(data)
            }
        })
    }
</script>
</body>

</html>